📌
📌
📌
📌
React
Search…
📌
📌
📌
📌
React
index
General Notes
Review-Of-Previous-Concepts
Reiew
Understanding By Example
Spread and Rest
REACT-RESOURCES
index
React-Resources
Thinking in React
Composition vs Inheritance
Using Web Components in React
REACT ENVIORMENT
Hello World
Components And Props
JSX
projects
Project Examples
Prerequisites
Prerequisites
Advanced
Advanced
MY_DOCS
Docs
React Components
Composition vs Inheritance
Methodologies
Node.js versus Next.js - A React Approach
Interview
Question Set #1:
Powered By GitBook
Reiew
Spreading Arguments
1
function speak(verb, noun) {
2
return "I like to go " + verb + " with " + noun + ".";
3
}
4
​
5
const words = ["running", "Jet"];
6
​
7
console.log(speak("running", "Jet")); // => I like to go running with Jet.
8
console.log(speak(...words)); // => I like to go running with Jet.
Copied!

Destructuring

    Destructuring Syntax : Allows you to extract parts of an array or obj intro distinct variables.
1
let numArray = [10, 20];
2
​
3
// here we are "unpacking" the array values into two separate variables
4
let [firstEl, secondEl] = numArray;
5
​
6
console.log(firstEl); //=> 10
7
console.log(secondEl); //=> 20
Copied!
Swapping Variables using destructuring
1
let num1 = 17;
2
let num2 = 3;
3
​
4
// this syntax will swap the values of the two variables
5
[num1, num2] = [num2, num1];
6
​
7
console.log(num1); // 3
8
console.log(num2); // 17
Copied!
    One of the cool things we can do with destructuring is swap the values of two variables.
Destructuring objects into variables
    One of the most useful parts of destructuring is the ability to take apart and assign little slices of large objs to variables.
1
let obj = { name: "Apples", breed: ["tabby", "short hair"] };
2
let { name, breed } = obj;
3
​
4
console.log(name); // "Apples"
5
console.log(breed); // ["tabby", "short hair"]
Copied!
    Aliased Object Destructuring : When our variable does not have the same name as our object's keys.
1
let obj = { apple: "red", banana: "yellow" };
2
let { apple: newApple, banana: newBanana } = obj;
3
​
4
console.log(newApple); // "red"
5
console.log(newBanana); // "yellow"
Copied!
    Good rule of thumb to keep clarity in your code is to only destructure values from objects that are two levels deep.
1
// the fname key is nested more than two levels deep
2
// (within bootcamp.instructor.fullName)
3
let bootcamp = {
4
name: "Lambda",
5
color: "red",
6
instructor: {
7
fullName: {
8
fname: "Rose",
9
lname: "K",
10
},
11
},
12
};
13
​
14
// this is hard to follow:
15
let {
16
instructor: {
17
fullName: { fname, lname },
18
},
19
} = bootcamp;
20
console.log(fname, lname);
21
​
22
// this is much easier to read:
23
let { fname, lname } = bootcamp.instructor.fullName;
24
console.log(fname, lname);
Copied!
Destructuring and the Rest Pattern
1
let foods = ["pizza", "ramen", "sushi", "kale", "tacos"];
2
​
3
let [firstFood, secondFood, ...otherFoods] = foods;
4
console.log(firstFood); // => "pizza"
5
console.log(secondFood); // => "ramen"
6
console.log(otherFoods); // => ["sushi", "kale", "tacos"]
Copied!
    Currently the rest pattern is only officially supported by JS when destructuring arrays.
1
let { a, c, ...obj } = { a: 1, b: 2, c: 3, d: 4 };
2
console.log(a); // => 1
3
console.log(c); // => 3
4
console.log(obj); // => { b: 2, d: 4 }
Copied!

Destructuring Parameters

We can also destructure incoming parameters of a function. This is very useful when we're passing objects around to different functions.
1
let cat = { name: "Rupert", owner: "Curtis", weight: 10 };
2
​
3
// This unpacks the *owner* key out of any incoming object argument and
4
// assigns it to a owner parameter(variable)
5
function ownerName({ owner }) {
6
console.log("This cat is owned by " + owner);
7
}
8
​
9
ownerName(cat);
Copied!
1
let bigCat = {
2
name: "Jet",
3
owner: { name: "Rose" },
4
toys: ["ribbon"],
5
siblings: { name: "Freyja", color: "orange", toys: ["mouse", "string"] },
6
};
7
​
8
// here we use *aliased* object destructuring to create a siblingToys variable
9
function toyFinder({ toys, siblings: { toys: siblingToys } }) {
10
let allToys = toys.concat(siblingToys);
11
return allToys;
12
}
13
​
14
console.log(toyFinder(bigCat)); // => ["ribbon", "mouse", "string"]
Copied!

Plain Old JS Object Lesson Concepts (W2D2) - Concepts

    1.
    Label variables as either Primitive vs. Reference
    There are 5 primitive data types:
    Boolean, Null, Undefined, Number, String
    1 Reference Type:
    Object (arrays are a kind of object)
    2.
    Identify when to use . vs [] when accessing values of an object:
1
//Using [](bracket) notation
2
​
3
let person = {};
4
​
5
person["firstName"] = "Jesse";
6
console.log(person);
7
person["firstName"] = "Steven";
8
​
9
console.log(person);
10
​
11
//Using . (dot) notation
12
​
13
let person = {};
14
​
15
person.name = "Brian";
16
console.log(person);
17
person.name = "Steven";
18
console.log(person);
Copied!
    1.
    Use the obj[key] !== undefined pattern to check if a given variable that contains a key exists in an object

Checking for Undefinied with bracket notation

1
let person = {};
2
person.name = "Paul";
3
person.age = 25;
4
console.log(person);
5
console.log(person["name"] === "Paul");
6
console.log(person["age"] === 25);
7
console.log(person["occupation"] === undefined);
8
console.log(person["occupation"] !== undefined);
Copied!
    1.
    Utilize Object.keys and Object.values in a function
1
//Object.keys
2
​
3
let cars = { make: "honda", model: "civic" };
4
console.log(Object.keys(cars));
5
​
6
//Object.values
7
​
8
let cars = { make: "honda", model: "civic" };
9
console.log(Object.values(cars));
Copied!
    1.
    Iterate through an object using a for in loop
1
let obj = { game: "call of duty", console: "PC duh?" };
2
​
3
for (let keys in obj) {
4
let values = obj[keys];
5
console.log("Here are the key value pairs!", keys, "-", values);
6
}
Copied!
    1.
    Define a function that utilizes ...rest syntax to accept an arbitrary number of arguments
1
let acceptEverything = function (...everything) {
2
console.log(everything);
3
};
4
​
5
acceptEverything("thing1", "thing2", "thing3");
Copied!
    1.
    Use ...spread syntax for Object literals and Array literals
1
let arrayOfNums = [0, 1, 2, 3, 4];
2
​
3
let moreNums = [...arrayOfNums, 5, 6, 7, 8, 9];
4
​
5
console.log(moreNums);
6
​
7
let hubby = { firstName: "John", lastName: "Doe" };
8
let wifey = { firsName: "Jane", lastName: "Doe" };
9
​
10
let couple = { ...hubby, ...wifey };
11
//Something interesting happens here
12
console.log(couple);
13
​
14
let person1 = { name: "Jack", faveColor: "red" };
15
let person2 = { name: "Paul", faveColor: "blue" };
16
let people = { ...person1, ...person2 };
17
console.log(people);
Copied!
    1.
    Destructure an array to reference specific elements
1
let nums = [1, 2];
2
​
3
let [num1, num2] = nums;
4
​
5
console.log("num1 variable", num1, " num2 variable", num2);
Copied!
    1.
    Destructure an object to reference specific values
1
let person = {
2
name: "Kelly",
3
getFaveColor: function () {
4
return "blue";
5
},
6
friends: {
7
name: "Ryan",
8
},
9
};
10
​
11
let {
12
friends: { name },
13
} = person;
14
​
15
console.log("name", person.name);
16
console.log("favorite color", person.getFaveColor());
17
console.log(name);
Copied!
    1.
    Write a function that accepts a array as an argument and returns an object representing the count of each character in the array
1
let myCounter = function (array) {
2
let myObj = {};
3
let count = 1;
4
array.forEach(function (char) {
5
if (myObj[char] === undefined) {
6
myObj[char] = count;
7
} else {
8
myObj[char]++;
9
}
10
});
11
return myObj;
12
};
13
​
14
console.log(myCounter(["a", "a", "n", "c"]));
Copied!

Wednesday -----------------------------------------------------------------------------------------------------------------------------

Notes

Callbacks: Using a Function as an Argument

What is a callback?
    A callback is always a function that is being passed into another function.
1
let foobar = function (callback) {
2
console.log("foo");
3
callback();
4
console.log("bar");
5
};
6
​
7
let sayHello = function () {
8
console.log("hello");
9
};
10
​
11
foobar(sayHello); // prints
12
// foo
13
// hello
14
// bar
Copied!
    Although we named our parameter callback, we could name it anything we like.
1
let foobar = function (callback) {
2
console.log("foo");
3
callback();
4
console.log("bar");
5
};
6
​
7
foobar(function () {
8
console.log("hello");
9
}); // prints
10
// foo
11
// hello
12
// bar
Copied!
    Anonymous Callback : When we use a function expression directly.
    Typically we want to assign our callback to a name if we plan on using it multiple times, an anonymous callball is better if it's just single use.
A More Interesting Example
1
let add = function (num1, num2, cb) {
2
let sum = num1 + num2;
3
let result = cb(sum);
4
return result;
5
};
6
​
7
let double = function (num) {
8
return num * 2;
9
};
10
​
11
console.log(add(2, 3, double)); // 10
Copied!
    Variable expression function being passed in as an argument.
1
let add = function (num1, num2, cb) {
2
let sum = num1 + num2;
3
let result = cb(sum);
4
return result;
5
};
6
​
7
console.log(add(60, 4, Math.sqrt)); // 8
Copied!
    Math.sqrt built in function being passed directly in as an argument.
Refactoring for an Optional Callback
    We can add in a conditional to make the callback optional. (This is a very common pattern in Javascript!)
1
let add = function (num1, num2, cb) {
2
if (cb === undefined) {
3
return num1 + num2;
4
} else {
5
return cb(num1 + num2);
6
}
7
};
8
​
9
console.log(add(9, 40)); // 49
10
console.log(add(9, 40, Math.sqrt)); // 7
Copied!

Callback Functions as First Class Objects

    First-Class Object : A type that supports the same basic operations as most other types. (i.e. Numbers, Strings & Booleans)
    First-Class Objects must be able to do three things:
      They can be stored in variables.
        Function Expression Notation.
      They can be passed as arguments.
        Callback Functions.
      They can be returned in functions.
      1
      function foo() {
      2
      return function () {
      3
      return "I'm a cat";
      4
      };
      5
      }
      Copied!
    As we have just proved above, functions are indeed first-class objects!
    Higher-Order Function : A function that should either accept another function as an argument, or return a function as an output.
    Callback Functions are passed into Higher-Order Functions.

Callback Functions Demo

Interesting Interaction.
1
let foo = function () {
2
let bar = function () {
3
console.log("interesting");
4
};
5
return bar;
6
};
7
​
8
console.log(foo()); // [function: bar]
9
​
10
let res = foo();
11
console.log(rest); // interesting.
Copied!
    Saving our function into a variable will

Thursday --------------------------------------------------------------------------------

Notes

All About Scope in Javscript

The scope of a program in JS is the set of variables that are available for use within the program.
Advantages of utilizing scope
    Security : Adds security by ensuring variables can only be access by pre-defined parts of our program.
    Reduced Variable Name Collisions : Restricts re-using variable names; helps prevent overwriting variable names.
Different Kinds of Scope
    Global Scope
      The widest and outermost scope.
      Represented by the window obj in the browser and the global obj in Node.js.
      Try to avoid these as much as possible.
    Local Scope
      Scope within a function.
      Includes function arguments, variables declared within function, also any variables already declared when the function was defined
    Block Scope
      Contents within curly braces.
Scope Chaining: Variables and Scope
1
let name = "Fiona";
2
​
3
// we aren't passing in or defining and variables
4
function hungryHippo() {
5
console.log(name + " is hungry!");
6
}
7
​
8
hungryHippo(); // => "Fiona is hungry"
Copied!
    A key scoping rule is that an inner scope does have access to variables in the outer scope.
    Scope Chaining : When a variable is not found within the immediate scope, JS will keep searching outwards until it matches the one we are referencing.
    Important to note while inner scopes can search outwards, outer scopes cannot reference inner variables!
Lexical Scope
    Lexing Time : When you run a piece of JS code that is parsed before it is run.
    JS language does not have dynamic scope.

Different Variables in Javascript

    A variable always evaluates to the value it contains no matter how you declare it.
The different ways to declare variables
    let : can be re-assigned; block-scoped.
    const : no re-assignment; block scoped.
    var : May or may not be re-assigned; scoped to a function.
Hoisting and Scoping with Variables
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.
Function-Scoped Variables
    As we learned, var creates function-scoped variables, this means our declared var keyword variable will be confined to the scope of our current function.
Hoisting with function-scoped variables
1
function test() {
2
// var hoistedVar;
3
console.log(hoistedVar); // => undefined
4
var hoistedVar = 10;
5
}
Copied!
    Even though we initially declared & initizalized our variable underneath the console.log var variables are "hoisted" to the top, but only in declaration.
Block-Scoped Variables
Things that create block-scopes:
    If Statements
    While Loops
    Switch Statements
    For Loops
Properties of Constants
    They are block-scoped like let.
    JS will enforce constants by raising an error if you try to change them.
    Constants that are assigned to Reference Types are mutable
Hoisting with block-scoped variables
    Unlike vars in function scopes, let and const in their block scopes do not get their declarations hoisted.
    Instead they are not initalized until their definitions are evaluated - instead of undefined we will get an error.
    Temporal Dead Zone : The time before a let or const variable is declared.
Function Scope vs Block Scope
    The downside of the flexibility of var is that it can easily overwrite previously declared variables.
    The block-scope limitations of let and const were introduced to easily avoid accidentally overwriting variable values.
Global Variables
    Any variables declared without a declaration term will be considered global scope.
    Every time a variable is declared on the global scope, the change of collision increases.
    Use the proper declarations to manage your code: Avoid being a sloppy programmer!

Closures

Calculating Closures
    Closure : The combination of a function and the lexical environment within which that function is declared.
    Use : A closure is when an inner function uses, or changes, variables in an outer function.
    Very important for creativity, flexibility, and security of your code.
    Lexical Environment : Consists of any variables available within the scope in which a closure was declared (local inner, outer, and global).
Closures and Scope Basic Closure Rules:
    Closures have access to all variables in it's lexical environment.
    A closure will keep reference to all the variables when it was defined even if the outer function has returned.
Applications of Closures
    Private State
      JS does not have a way of declaring a function as exclusively private, however we can use closures to make a private state.
    Passing Arguments Implicitly
      We can use closures to pass down arguments to helper functions.
    1
    function isPalindrome(string) {
    2
    function reverse() {
    3
    return string.split("").reverse().join("");
    4
    }
    5
    ​
    6
    return string === reverse();
    7
    }
    Copied!

Context in Javascript

    Scope : Refers to the visibility and availability of variables.
    Context : Refers to the value of the this keyword when code is executed.
What about this ?
    This : Keyword that exists in every function and evaluates to the object that is currently invoking that function.
    Method-Style Invocation : syntax goes like object.method(arg). (i.e. array.push, str.toUpperCase()
    Context refers to the value of this within a function and this refers to where a function is invoked.
Issues with Scope and Context
    If this is called using normal function style invocation, our output will be the contents of the global object.
When Methods have an Unexpected Context
1
let dog = {
2
name: "Bowser",
3
changeName: function () {
4
this.name = "Layla";
5
},
6
};
7
​
8
let change = dog.changeName;
9
console.log(change()); // undefined
10
​
11
console.log(dog); // { name: 'Bowser', changeName: [Function: changeName] }
12
​
13
console.log(this); // Object [global] {etc, etc, etc, name: 'Layla'}
Copied!
    In the above example we get undefined when we assign our this function to a variable bc there is no obj to reference except the global one!
    global.setTimeout() : popular method of setting a function to run on a timer.
      Accepts a callback and a number of milliseconds to wait before invoking the callback.
      1
      let hello = function () {
      2
      console.log("hello!");
      3
      };
      4
      ​
      5
      // global. is a method of the global object!
      6
      global.setTimeout(hello, 5000); // waits 5 seconds then prints "hello!"
      Copied!
Strictly Protecting the Global Object
We can run JS in strict mode by tagging use strict at the top of our program.
    If we try to invoke this on our global function in strict mode we will no longer be able to access it and instead just get undefined.
Changing Context using Bind
"The simplest use of bind() is to make a function that, no matter how it is called, is called with a particular this value".
1
let cat = {
2
purr: function () {
3
console.log("meow");
4
},
5
purrMore: function () {
6
this.purr();
7
},
8
};
9
​
10
let sayMeow = cat.purrMore;
11
console.log(sayMeow()); // TypeError
12
​
13
let boundCat = sayMeow.bind(cat);
14
​
15
boundCat(); // prints "meow"
Copied!
Binding with Arguments
    We can also use bind() to bind arguments to a function.
    1
    let aboundFunc = func.bind(context, arg1, arg2, etc...);
    Copied!
    1
    const sum = function (a, b) {
    2
    return a + b;
    3
    };
    4
    ​
    5
    const add3 = sum.bind(null, 3);
    6
    ​
    7
    console.log(add3(10)); // 13
    Copied!
    1
    const multiply = function (a, b) {
    2
    return a * b;
    3
    };
    4
    ​
    5
    const double = multiply.bind(null, 2);
    6
    const triple = multiply.bind(null, 3);
    7
    ​
    8
    console.log(double(3)); // 6
    9
    console.log(triple(3)); // 9
    Copied!

Arrow Functions aka Fat Arrows

    => : A more concise way of declaring a function and also considers the behavior of this and context.
Arrow Functions Solving Problems
1
let average = function (num1, num2) {
2
let avg = (num1 + num2) / 2;
3
return avg;
4
};
5
​
6
let averageArrow = (num1, num2) => {
7
let avg = (num1 + num2) / 2;
8
return avg;
9
};
Copied!
As you can see the arrow function is shorter and easier to read.
Anatomy of an Arrow Function
    If there is only a single parameter there is no need to add parenthesis before the arrow function.
    However if there are zero parameters then you must add an empty set of parentheses.
Single Expression Arrow Functions
    Arrow functions, unlike normal functions, carry over context, binding this lexically.
    Value of this inside an arrow function is not dependent on how it is invoked.
    Because arrow functions already have a bound context, you can't reassign this.
Previous
Review-Of-Previous-Concepts
Next
Understanding By Example
Last modified 1mo ago
Copy link
Contents
Destructuring
Destructuring Parameters
Plain Old JS Object Lesson Concepts (W2D2) - Concepts
Checking for Undefinied with bracket notation
Wednesday -----------------------------------------------------------------------------------------------------------------------------
Notes
Callbacks: Using a Function as an Argument
Callback Functions as First Class Objects
Callback Functions Demo
Thursday --------------------------------------------------------------------------------
Notes
All About Scope in Javscript
Different Variables in Javascript
Closures
Context in Javascript
Arrow Functions aka Fat Arrows